<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>新增保养计划</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="cancel">返回</el-button>
      </div>

      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="计划名称" prop="planName">
              <el-input v-model="form.planName" placeholder="请输入计划名称" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备" prop="equipmentId">
              <el-select v-model="form.equipmentId" placeholder="请选择设备" style="width: 100%">
                <el-option
                  v-for="item in equipmentOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="保养类型" prop="maintenanceType">
              <el-select v-model="form.maintenanceType" placeholder="请选择保养类型" style="width: 100%">
                <el-option
                  v-for="dict in maintenanceTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养周期(天)" prop="cycleDays">
              <el-input-number v-model="form.cycleDays" :min="1" :max="365" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期" prop="startDate">
              <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="endDate">
              <el-date-picker
                v-model="form.endDate"
                type="date"
                placeholder="选择日期"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="保养项目" prop="items">
          <el-table :data="form.items" border style="width: 100%">
            <el-table-column prop="itemName" label="保养项目" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.itemName" placeholder="请输入保养项目" />
              </template>
            </el-table-column>
            <el-table-column prop="standard" label="标准" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.standard" placeholder="请输入标准" />
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDeleteItem(scope.$index)"
                >删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button style="margin-top: 10px" type="primary" icon="el-icon-plus" size="mini" @click="handleAddItem">添加保养项目</el-button>
        </el-form-item>

        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" type="textarea" rows="3" placeholder="请输入备注" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AddMaintenancePlan',
  data() {
    return {
      // 表单参数
      form: {
        planName: '',
        equipmentId: '',
        maintenanceType: '',
        cycleDays: 7,
        startDate: '',
        endDate: '',
        items: [
          {
            itemName: '检查电机',
            standard: '无异常噪音'
          },
          {
            itemName: '检查传动部件',
            standard: '无松动、磨损'
          },
          {
            itemName: '润滑',
            standard: '按要求添加润滑油'
          }
        ],
        remark: ''
      },
      // 设备选项
      equipmentOptions: [
        { id: '1', name: '数控车床 - SB001' },
        { id: '2', name: '铣床 - SB002' },
        { id: '3', name: '注塑机 - SB003' }
      ],
      // 保养类型选项
      maintenanceTypeOptions: [
        { dictLabel: '日常保养', dictValue: '0' },
        { dictLabel: '周期保养', dictValue: '1' },
        { dictLabel: '临时保养', dictValue: '2' }
      ],
      // 表单校验
      rules: {
        planName: [
          { required: true, message: '请输入计划名称', trigger: 'blur' }
        ],
        equipmentId: [
          { required: true, message: '请选择设备', trigger: 'change' }
        ],
        maintenanceType: [
          { required: true, message: '请选择保养类型', trigger: 'change' }
        ],
        cycleDays: [
          { required: true, message: '请输入保养周期', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '请选择开始日期', trigger: 'change' }
        ],
        endDate: [
          { required: true, message: '请选择结束日期', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    /** 添加保养项目 */
    handleAddItem() {
      this.form.items.push({
        itemName: '',
        standard: ''
      });
    },
    /** 删除保养项目 */
    handleDeleteItem(index) {
      this.form.items.splice(index, 1);
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 校验保养项目
          if (this.form.items.length === 0) {
            this.$modal.msgError("请添加至少一个保养项目");
            return;
          }
          
          // 校验开始日期和结束日期
          if (this.form.startDate && this.form.endDate) {
            if (new Date(this.form.startDate) > new Date(this.form.endDate)) {
              this.$modal.msgError("开始日期不能晚于结束日期");
              return;
            }
          }
          
          // 实际应调用后端API
          this.$modal.msgSuccess("新增成功");
          this.cancel();
        }
      });
    },
    /** 取消按钮 */
    cancel() {
      this.$router.push({ path: "/sb/Maintenance-plan" });
    }
  }
}
</script> 